<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ age }}</h1>
        <button @click="changeName">修改名称</button>
        <button @click="showAge">展示名称</button>
    </div>
</template>

<script setup lang="ts" name="PersonInfoSyntax">
/**
 *  setup语法糖
    使用vite插件简化导出操作
        1,使用vite插件 npm i vite-plugin-vue-setup-extend -D
        2,修改vite.config.ts 
            import { defineConfig } from 'vite'
            import VueSetupExtend from 'vite-plugin-vue-setup-extend'
            
            export default defineConfig({
                plugins: [ VueSetupExtend() ]
            })
        3,<script setup lang="ts" name="Person">
 */


// 可以定义数据，此时的数据并不是响应式的
let name = "小吳"
let age = 20

function changeName() {
    name = "小李"
    console.log('print------>name', name)
}

function showAge() {
    alert(age)
    console.log('print------>age', age)
}

</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>
